<template>
  <div>
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="9">
          <el-input clearable v-model="queryInfo.query" placeholder="请输入商品名" prefix-icon="el-icon-search">
            <el-button slot="append" icon="el-icon-search" @click="getProductList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addProductDialogVisible=true">新增</el-button>
        </el-col>
      </el-row>
      <el-table :data="productList.slice((queryInfo.pageNum-1)*queryInfo.pageSize,queryInfo.pageNum*queryInfo.pageSize)"
      style="width: 100%"
      stripe border fixed height="500">
          <el-table-column
            fixed="left"
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="barCode"
            label="条码"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="商品名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="anotherName"
            label="别名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="value"
            label="价值"
            width="180">
          </el-table-column>
          <el-table-column
            prop="netWeight"
            label="净重"
            width="180">
          </el-table-column>
          <el-table-column
            prop="roughWeight"
            label="毛重"
            width="180">
          </el-table-column>
          <el-table-column
            prop="effectiveDays"
            label="有效天数"
            width="180">
          </el-table-column>
          <!-- <el-table-column
            prop="warehouse"
            label="所属仓库名称"
            width="180">
          </el-table-column> -->
          <el-table-column
            prop="remarks"
            label="备注"
            width="180">
          </el-table-column>
          <el-table-column
            fixed="right"
            prop="operate"
            label="操作"
            width="180">
            <template slot-scope="scope" >
              <el-button type="primary" icon="el-icon-edit" size="small" @click="open(scope.row)">修改</el-button>
              <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteProduct(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

       <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="queryInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
        </el-pagination>

      </el-card>

      <el-dialog title="新增商品" :visible.sync="addProductDialogVisible" width="65%" @close="closeAddProductDialog">

        <el-form :model="addProductForm" :rules="rules" ref="addProductRuleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="条码" prop="barCode">
            <el-row :gutter="15">
              <el-col :span="22">
                <el-input v-model="addProductForm.barCode"></el-input>
              </el-col>
              <el-col :span="1">
                <el-button type="primary" @click="createBarCode">自动</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="商品名" prop="name">
            <el-input v-model="addProductForm.name" ></el-input>
          </el-form-item>
          <el-form-item label="别名" prop="anotherName">
            <el-input v-model="addProductForm.anotherName"></el-input>
          </el-form-item>
          <el-form-item label="价值" prop="value">
            <el-input v-model="addProductForm.value"></el-input>
          </el-form-item>
          <el-form-item label="净重" prop="netWeight">
            <el-input v-model="addProductForm.netWeight"></el-input>
          </el-form-item>
          <el-form-item label="毛重" prop="roughWeight">
            <el-input v-model="addProductForm.roughWeight"></el-input>
          </el-form-item>
          <el-form-item label="有效天数" prop="effectiveDays">
            <el-input v-model="addProductForm.effectiveDays"></el-input>
          </el-form-item>
          <!-- <el-form-item label="所属仓库" prop="warehouse">
            <el-select v-model="updataProductForm.warehouse" placeholder="请选择"  >
                <el-option
                  v-for="storehouse in storehouseList"
                  :key="storehouse.name"
                  :label="storehouse.name"
                  :value="storehouse.name">
                </el-option>
              </el-select>
          </el-form-item> -->
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="addProductForm.remarks" type="textarea"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="addProductDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addProduct">确 定</el-button>
        </div>
      </el-dialog>

   <el-dialog title="修改商品" :visible.sync="updataProductDialogVisible" width="65%" @close="closeUpdataProductDialog">
      <el-form :model="updataProductForm" :rules="rules" ref="updataProductRuleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="价值" prop="value">
          <el-input v-model="updataProductForm.value"></el-input>
        </el-form-item>
        <el-form-item label="净重" prop="netWeight">
          <el-input v-model="updataProductForm.netWeight"></el-input>
        </el-form-item>
        <el-form-item label="毛重" prop="roughWeight">
          <el-input v-model="updataProductForm.roughWeight"></el-input>
        </el-form-item>
        <el-form-item label="有效天数" prop="effectiveDays">
          <el-input v-model="updataProductForm.effectiveDays"></el-input>
        </el-form-item>
        <!-- <el-form-item label="所属仓库" prop="warehouse">
          <el-select v-model="updataProductForm.warehouse" placeholder="请选择"  >
              <el-option
                v-for="storehouse in storehouseList"
                :key="storehouse.name"
                :label="storehouse.name"
                :value="storehouse.name">
              </el-option>
            </el-select>
        </el-form-item> -->
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="updataProductForm.remarks"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="updataProductDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updataProduct">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data () {
    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      productList: [],
      addProductDialogVisible: false,
      updataProductDialogVisible: false,
      addProductForm: {
        barCode: '',
        name: '',
        anotherName: '',
        value: '',
        netWeight: '',
        roughWeight: '',
        effectiveDays: '',
        // warehouse:'',
        remarks: ''
      },
      updataProductForm: {
        barCode: '',
        value: '',
        netWeight: '',
        roughWeight: '',
        effectiveDays: '',
        // warehouse:'',
        remarks: ''
      },
      storehouseList: [],
      rules: {
        barCode: [
          { required: true, message: '请输入条码', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入商品名', trigger: 'blur' }
        ],
        anotherName: [
          { required: true, message: '请输入别名', trigger: 'blur' }
        ],
        value: [
          { required: true, message: '请输入价值', trigger: 'blur' }
        ],
        netWeight: [
          { required: true, message: '请输入净重', trigger: 'blur' }
        ],
        roughWeight: [
          { required: true, message: '请输入毛重', trigger: 'blur' }
        ],
        effectiveDays: [
          { required: true, message: '请输入有效天数', trigger: 'blur' }
        ]
        // warehouse:[
        //   { required: true, message: '请输入所属仓库', trigger: 'blur' }
        // ],
      }
    }
  },
  methods: {

    async getProductList () {
      const { data: result } = await this.$http.get('/product/list', { params: this.queryInfo })
      if (result.status !== 200) return this.$message.error('获取列表失败')

      this.total = result.data.total
      this.productList = result.data.rows
    },
    addProduct () {
      this.$refs.addProductRuleForm.validate(async validate => {
        if (!validate) return this.$message.error('请填写必填项')
        const { data: result } = await this.$http.post('/product/addProduct', this.addProductForm)
        if (result.status !== 200) return this.$message.error('添加商品失败')
        this.$message.success('添加商品成功')
        this.getProductList()
        this.addProductDialogVisible = false
      })
    },

    handleSizeChange (val) {
      this.queryInfo.pageSize = val
      this.getProductList()
    },
    handleCurrentChange (val) {
      this.queryInfo.pageNum = val
      this.getProductList()
    },
    closeAddProductDialog () {
      this.$refs.addProductRuleForm.resetFields()
    },
    closeUpdataProductDialog () {
      this.$refs.updataProductRuleForm.resetFields()
    },
    createBarCode () {
      var now = new Date()
      var nowstr = now.getTime()
      this.addProductForm.barCode = 'P' + now.getTime()
      console.log(nowstr)
    },
    open (product) {
      this.updataProductForm.barCode = product.barCode
      this.updataProductForm.value = product.value
      this.updataProductForm.netWeight = product.netWeight
      this.updataProductForm.roughWeight = product.roughWeight
      this.updataProductForm.effectiveDays = product.effectiveDays
      // this.updataProductForm.warehouse = product.warehouse
      this.updataProductForm.remarks = product.remarks
      this.updataProductDialogVisible = true
    },
    updataProduct () {
      this.$refs.updataProductRuleForm.validate(async valid => {
        const { data: result } = await this.$http.put('/product/updataProduct', this.updataProductForm)
        if (result.status !== 200) return this.$message.error('更新数据失败')
        this.$message.success('更新成功')
        this.updataProductDialogVisible = false
        this.getProductList()
      })
    },
    async deleteProduct (product) {
      const result = await this.$confirm('此操作将永久删除' + product.name + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error)
      if (result !== 'confirm') return this.$message.info('用户取消操作')
      const { data: resultDB } = await this.$http.delete(`/product/delete/${product.barCode}`)
      if (resultDB.status !== 200) return this.$message.error('删除商品失败')
      this.getProductList()
      this.$message.success('商品删除成功')
    },
    async getStorehouse () {
      const { data: result } = await this.$http.get('/product/getStorehouse')
      if (result.status !== 200) return this.$message.error('获取仓库列表失败')
      this.storehouseList = result.data
    }
  },
  mounted () {
    this.getProductList()
    this.getStorehouse()
  }
}
</script>

<style>
</style>
